<template>
  <el-container>
    <mainNav/>
    <el-main>

        <el-tabs v-model="currentTab"   class="console_tab" @tab-click="holdTab" >
            <el-tab-pane name="console">
              <span slot="label"><img :src="currentTab=='console'?projectImg_1 :projectImg_0" /> 项目管理</span>
            </el-tab-pane>
            <el-tab-pane name="team"  >
                <span slot="label"><img :src="currentTab=='team'?teamImg_1 :teamImg_0"/> 团队管理</span>
            </el-tab-pane>
            <el-tab-pane name="event"  >
                <span slot="label"><img :src="currentTab=='event'?eventImg_1 :eventImg_0"/> 团队动态</span>
            </el-tab-pane>
        </el-tabs>
    <div>
      <nuxt />
    </div>
    </el-main>
    <el-footer>
    </el-footer>
  </el-container>
</template>
<script>
import mainNav from "@/components/mainNav.vue"
export default {
  data: () => ({
      currentTab: "console",
      projectImg_0:require('../static/project_0.svg'),
      projectImg_1:require('../static/project_1.svg'),
      teamImg_0:require('../static/team_0.svg'),
      teamImg_1:require('../static/team_1.svg'),
      eventImg_0:require('../static/event_0.svg'),
      eventImg_1:require('../static/event_1.svg'),
  }),
  components:{
    mainNav
  },
  beforeCreate(){
    console.log("Default BeforeCreate ");
  },
  created(){
    console.log("Default created ");
  },
  beforeMount(){
    console.log("Default beforeMount ");
    this.currentTab=this.$router.currentRoute.name;
  },
  mounted(){
    console.log("Default mounted ");
  },
  beforeUpdate(){
    console.log("Default beforeUpdate ");
  },
  updated(){
    console.log("Default updated ");
  },
  methods:{
         holdTab:function(tab){
            this.$router.push(tab.name);
        },
    }
}
</script>
<style lang="scss">

.console_tab .el-tabs__item img{
    float: left;
    margin: 11px 5px 0px 0px;
    width: 17px;    
}
.subHeader{
  display: block;
  height: 50px;
  overflow: hidden;
}
.subHeader .right{
  width:40%;
  float: right;
  text-align: right;
  padding-right: 10px;
}
.opCell .cell{
  text-align: right;
}
</style>